<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCLUB在线笔试</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.8/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <style>
        .number1{
            color:#fff;
            background-color:#5272ff;
            width:30px;
            height:30px;
            border-radius:50%;
            font-size:24px;
            padding-left:13px;
            padding-top:5px;
            padding-bottom:5px;
        }
        .number2{
            color:#5272ff;
            background-color:#d0d9ff;
            width:30px;
            height:30px;
            font-size:24px;
            border-radius:50%;
            padding-left:13px;
            padding-top:5px;
            padding-bottom:5px;
        }
        .el-form{
            width:1340px;
            border:1px solid #ececed;
            margin-left:50px;
            margin-top:10px;
            margin-bottom:70px;
        }
        .el-form-foot{
            margin-left:85px;
            margin-top:35px;
            width:1235px;
            height:40px;
            background-color:#eff2ff;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left:30px;margin-top:15px;font-size:24px;height:28px;">
        <div style="float:left;">{{name}}</div>
        <div style="float:left;margin-left:1100px;">
            <a href="javascript:void(0);" style="text-decoration:none;color:rgb(60,60,60);font-size:14px;">视频面试</a>
        </div>
        <div style="float:left;margin-left:30px;">
            <el-dropdown placement="bottom-start">
                <span class="el-dropdown-link">{{userInfo.user_company}}
                    <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item style="background-color:#f6f8ff;">{{userInfo.user_phone}}</el-dropdown-item>
                    <el-dropdown-item disabled style="font-size:12px;">当前公司:</el-dropdown-item>
                    <el-dropdown-item style="font-size:12px;">&nbsp;&nbsp;&nbsp;{{userInfo.user_company}}</el-dropdown-item>
                    <el-dropdown-item >个人中心</el-dropdown-item>
                    <el-dropdown-item divided>
                        <a href="javascript:void(0);" @click="signOut" style="text-decoration:none;color:rgb(30,30,30);">
                            退出登录
                        </a>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
    <el-divider></el-divider>
    <div style="margin-left:50px;margin-top:30px;">
        <span>
            <a href="javascript:void(0);" @click="" style="color:#3e444c;text-decoration:none;"><- 返回</a>
        </span>
        <span style="margin-left:15px;color:#ececed;">|</span>
        <span style="margin-left:15px;color:#3e444c;">编辑题目</span>
    </div>
    <div style="margin-top:30px;width:1340px;height:103px;background-color:#FBFBFF;margin-left:50px;">
        <div style="margin-left:250px;padding-top:15px;float:left;">
            <div class="number1">1</div>
            <div style="color:#2b313a;font-size:12px;margin-top:15px;margin-left:-15px;">设置考试规则</div>
        </div>
        <div style="float:left;margin-left:350px;padding-top:15px;">
            <div class="number1">2</div>
            <div style="color:#8b8f94;font-size:12px;margin-top:15px;margin-left:-5px;">编辑题目</div>
        </div>
        <div style="float:left;margin-left:350px;padding-top:15px;">
            <div class="number2">3</div>
            <div style="color:#8b8f94;font-size:12px;margin-top:15px;margin-left:10px;">完成</div>
        </div>
    </div>
    <div class="el-form">
        <div style="width:1320px;margin-left:10px;margin-top:10px;background-color:#f2f5ff;height:60px;">
            <div style="margin-left:40px;padding-top:20px;">
                <span>试卷总分: {{allScore}}分</span>
                <span style="margin-left:20px;">试卷题数: {{choiceQuestion.length+judgeQuestion.length+completionQuestion.length}}题</span>
            </div>
        </div>
        <div style="width:1320px;margin-left:10px;background-color:#e9f8f5;height:215px;margin-bottom:10px;" v-if="choiceQuestion.length+judgeQuestion.length+completionQuestion.length===0">
            <div style="margin-left:640px;padding-top:40px;">
                <img src="../img/exam_no_question.png" alt="" width="50px" height="50px">
            </div>
            <div style="margin-top:15px;margin-left:610px;">
                暂时还没有题目
            </div>
            <div style="margin-left:560px;margin-top:20px;">
                <span>
                    <el-button type="primary" size="small" style="width:100px;" @click="subject">从题库中选择</el-button>
                </span>
                <span style="margin-left:1px;">
                    <el-button type="primary" size="small" style="width:100px;" @click="addSubject">+ 录入新题</el-button>
                </span>
            </div>
        </div>
        <!--选择题-->
        <div style="width:1320px;margin-left:10px;font-size:13px;margin-bottom:30px;" v-for="(item,index) in choiceQuestion" v-if="choiceQuestion.length>0">
            <div style="margin-top:20px;margin-left:20px;">
                <div style="float:left;" v-if="item.choice_question_answer.split(' ').length>1">{{index+1}}.[多选题]</div>
                <div style="float:left;" v-if="item.choice_question_answer.split(' ').length===1">{{index+1}}.[单选题]</div>
                <div style="float:left;margin-left:20px;width:1200px;">{{item.choice_question_name}}</div>
            </div>
            <div style="margin-left:20px;padding-top:10px;">
                <div style="margin-left:80px;margin-top:15px;">
                    <div style="float:left;"><strong>A.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_A}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" >
                    <div style="float:left;"><strong>B.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_B}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" >
                    <div style="float:left;"><strong>C.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_C}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" v-if="item.choice_question_option_D!=null">
                    <div style="float:left;"><strong>D.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_D}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" v-if="item.choice_question_option_E!=null">
                    <div style="float:left;"><strong>D.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_E}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" v-if="item.choice_question_option_F!=null">
                    <div style="float:left;"><strong>D.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_F}}</div>
                </div>
                <div style="margin-left:80px;padding-top:30px;" v-if="item.choice_question_option_G!=null">
                    <div style="float:left;"><strong>D.&nbsp;</strong></div>
                    <div style="float:left;">{{item.choice_question_option_G}}</div>
                </div>
            </div>
            <div style="margin-left:20px;padding-top:30px;color:red;">
                <div style="float:left;">[答案]</div>
                <div style="float:left;margin-left:45px;"><strong>{{item.choice_question_answer}}</strong></div>
            </div>
            <div class="el-form-foot">
                <div style="margin-left:950px;padding-top:7px;">
                    <span>分值</span>
                    <span style="margin-left:5px;">
                        <el-input v-model="item.choice_question_score" size="mini" style="width:60px;" @change="scoreChange"></el-input>
                    </span>
                    <span style="margin-left:5px;">分</span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;" @click="editQuestion(item.choice_question_id,1)">
                            <i class="el-icon-edit-outline"></i>
                            编辑
                        </a>
                    </span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;color:red;" @click="deleteExamQuestionOpen(item.choice_question_id)">
                            <i class="el-icon-delete"></i>
                            删除
                        </a>
                    </span>
                </div>
            </div>
        </div>
        <!--判断题-->
        <div style="width:1320px;margin-left:10px;font-size:13px;margin-bottom:30px;" v-for="(item,index) in judgeQuestion" v-if="judgeQuestion.length>0">
            <div style="margin-top:20px;margin-left:20px;">
                <div style="float:left;">{{index+1+choiceQuestion.length}}.[判断题]</div>
                <div style="float:left;margin-left:20px;width:1200px;">{{item.judge_question_name}}</div>
            </div>
            <div style="margin-left:20px;padding-top:10px;">
                <div style="margin-left:75px;padding-top:20px;" >
                    <div style=""><strong>{{item.judge_question_option_true}}</strong></div>
                </div>
                <div style="margin-left:75px;padding-top:5px;">
                    <div style=""><strong>{{item.judge_question_option_false}}</strong></div>
                </div>
            </div>
            <div style="margin-left:20px;padding-top:20px;color:red;">
                <div style="float:left;">[答案]</div>
                <div style="float:left;margin-left:40px;"><strong>{{item.judge_question_answer}}</strong></div>
            </div>
            <div class="el-form-foot">
                <div style="margin-left:950px;padding-top:7px;">
                    <span>分值</span>
                    <span style="margin-left:5px;">
                        <el-input v-model="item.judge_question_score" size="mini" style="width:60px;"></el-input>
                    </span>
                    <span style="margin-left:5px;">分</span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;" @click="editQuestion(item.judge_question_id,2)">
                            <i class="el-icon-edit-outline"></i>
                            编辑
                        </a>
                    </span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;color:red;" @click="deleteExamQuestionOpen(item.judge_question_id)">
                            <i class="el-icon-delete"></i>
                            删除
                        </a>
                    </span>
                </div>
            </div>
        </div>
        <!--填空题-->
        <div style="width:1320px;margin-left:10px;font-size:13px;margin-bottom:30px;" v-for="(item,index) in completionQuestion" v-if="completionQuestion.length>0">
            <div style="margin-top:20px;margin-left:20px;">
                <div style="float:left;">{{index+1+choiceQuestion.length+completionQuestion.length}}.[填空题]</div>
                <div style="float:left;margin-left:20px;width:1200px;">{{item.completion_question_name}}</div>
            </div>
            <div style="margin-left:20px;padding-top:40px;color:red;">
                <div style="float:left;">[答案]</div>
                <div style="float:left;margin-left:45px;"><strong>{{item.completion_question_answer}}</strong></div>
            </div>
            <div class="el-form-foot">
                <div style="margin-left:950px;padding-top:7px;">
                    <span>分值</span>
                    <span style="margin-left:5px;">
                        <el-input v-model="item.completion_question_score" size="mini" style="width:60px;"></el-input>
                    </span>
                    <span style="margin-left:5px;">分</span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;" @click="editQuestion(item.completion_question_id,3)">
                            <i class="el-icon-edit-outline"></i>
                            编辑
                        </a>
                    </span>
                    <span style="margin-left:15px;">
                        <a href="javascript:void(0);" style="text-decoration:none;font-size:13px;color:red;" @click="deleteExamQuestionOpen(item.completion_question_id)">
                            <i class="el-icon-delete"></i>
                            删除
                        </a>
                    </span>
                </div>
            </div>
        </div>
        <div style="margin-bottom:15px;margin-top:-16px;" v-if="choiceQuestion.length+judgeQuestion.length+completionQuestion.length>0">
            <div style="width:1340px;background-color:#ececed;height:1px;"></div>
            <div style="margin-top:15px;margin-left:20px;">
                <span>
                    <el-button type="primary" size="small" style="width:100px;" @click="subject">从题库选择</el-button>
                </span>
                <span style="margin-left:3px;">
                    <el-button type="primary" size="small" style="width:100px;" @click="addSubject">+录入新题</el-button>
                </span>
            </div>
        </div>
    </div>
    <div style="margin-left:550px;margin-top:35px;">
        <span>
            <el-button type="primary" plain style="width:150px;" size="small" @click="pre">上一步</el-button>
        </span>
        <span style="margin-left:30px;">
            <el-button type="primary" style="width:150px;" size="small">完成编辑,下一步</el-button>
        </span>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            name: 'CCLUB 在线笔试',
            userInfo:{
                user_phone: '18229583486',
                user_company: '茗少集团'
            },
            exam_id: '',
            choiceQuestion:[],
            judgeQuestion:[],
            completionQuestion:[],
            input: '5',
            allScore: 0
        },
        created(){
            this.getExamInfo();
            this.getExamChoiceQuestion();
            this.getExamJudgeQuestion();
            this.getExamCompletionQuestion();
            this.scoreChange();
        },
        methods:{
            signOut(){

            },
            addSubject(){
                window.location.href="/test_addSubject/"+this.exam_id;
            },
            getExamInfo(){
                let url=window.location.href.split("/");
                this.exam_id=url[url.length-1];
            },
            pre(){
                window.location.href="/test_createWrittenExam/"+this.exam_id;
            },
            async getExamChoiceQuestion(){
                let result=await axios.get('/getChoiceQuestionListByExamId?exam_id='+this.exam_id);
                this.choiceQuestion=result.data;
                for(let i=0;i<this.choiceQuestion.length;i++){
                    this.allScore+=this.choiceQuestion[i].choice_question_score
                }
            },
            async getExamJudgeQuestion(){
                let result=await axios.get('/getJudgeQuestionByExamId?exam_id='+this.exam_id);
                this.judgeQuestion=result.data;
                for(let i=0;i<this.judgeQuestion.length;i++){
                    this.allScore+=this.judgeQuestion[i].judge_question_score
                }
            },
            async getExamCompletionQuestion(){
                let result=await axios.get('/getCompletionQuestionListByExamId?exam_id='+this.exam_id);
                this.completionQuestion=result.data;
                for(let i=0;i<this.completionQuestion.length;i++){
                    this.allScore+=this.completionQuestion[i].completion_question_score
                }
            },
            deleteExamQuestionOpen(question_id){
                this.$confirm('此操作将删除该试题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteExamQuestion(question_id);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            async deleteExamQuestion(question_id){
                let result=await axios.get('/deleteExamQuestion?exam_id='+this.exam_id+"&question_id="+question_id);
                if(result.data===1){
                    this.$message({
                        type: 'success',
                        message: '删除试题成功'
                    });
                }else{
                    this.$message({
                        type: 'info',
                        message: '删除试题失败,服务器繁忙,请稍后'
                    });
                }
                this.getExamChoiceQuestion();
                this.getExamJudgeQuestion();
                this.getExamCompletionQuestion();
            },
            scoreChange(){
                this.allScore=0;
                for(let i=0;i<this.choiceQuestion.length;i++){
                    this.allScore+=parseInt(this.choiceQuestion[i].choice_question_score);
                }
                for(let i=0;i<this.judgeQuestion.length;i++){
                    this.allScore+=this.judgeQuestion[i].judge_question_score;
                }
                for(let i=0;i<this.completionQuestion.length;i++){
                    this.allScore+=this.completionQuestion[i].completion_question_score
                }
            },
            editQuestion(question_id,type){
                window.location.href="/test_addSubject/"+this.exam_id+"#"+question_id+"#"+type;
            },
            subject(){
                window.location.href="/test_subject/"+this.exam_id;
            }
        }
    })
</script>
</body>
</html>